<template>
	<el-container style="padding: 5px; background: white;">
		<el-main class="nopadding">
			<el-collapse accordion>
				<el-collapse-item name="1">
					<template #title>
						查询条件
					</template>
					<div class="right-panel">
						<div class="right-panel-search">
							<el-input placeholder="缸号" v-model="list.params.gh" clearable></el-input>
							<el-input placeholder="尺码" v-model="list.params.size" clearable></el-input>
							<el-input placeholder="颜色" v-model="list.params.color" clearable></el-input>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</div>
					</div>
					
				</el-collapse-item>
			</el-collapse>
			<el-radio-group v-model="activeName" size="large" is-button>
		      <el-radio-button label="未开始" @click="tabCheck('wait')" value="wait" />
		      <el-radio-button label="制作中" @click="tabCheck('doing')" value="doing"/>
		      <el-radio-button label="已完成" @click="tabCheck('end')" value="end"/>
		      <el-radio-button label="统计" @click="tabCount" value="count"/>
		    </el-radio-group>
		    
			<scTable v-if="activeName != '统计'" ref="table" :params="list.params" :apiObj="list.apiObj"  row-key="id">
				<el-table-column  label="" prop="procedure_name">
					<template #default="scope">
						<el-card>
							<template #header>
								<div class="card-header right-panel-search right-panel">
									<span>{{scope.row.procedure_name}}</span>
									
									<el-popconfirm title="确定完结吗?" @confirm="handEnd(scope.row)">
										<template #reference>
											<el-button class="button" type="warning" v-if="list.params.state == 'doing'">手动完结</el-button>
										</template>
									</el-popconfirm>
									
									<el-popover placement="bottom-start" title="流程码" trigger="hover">
										<template #default>
											<!-- {{getQrcode(scope.row)}} -->
											
											<sc-qr-code :text="getQrcode(scope.row)" :size="123"  colorLight="#fff"></sc-qr-code>
										</template>
										<template #reference>
											<el-button class="button" type="warning" v-if="list.params.state == 'wait'">未开始</el-button>
											<el-button class="button" type="primary" v-if="list.params.state == 'doing'">制作中</el-button>
											<el-button class="button" type="success" v-if="list.params.state == 'end'">已完成</el-button>
										</template>
									</el-popover>
								</div>
							</template>
							<el-row :gutter="21">
								<el-col :span="6" style="font-size: 20px">{{scope.row.number}}件</el-col>
								<el-col :span="5">{{scope.row.color}}</el-col>
								<el-col :span="10">尺码：{{scope.row.size}}</el-col>
								
							</el-row>
							<el-row :gutter="21" style="margin-top: 10px;">
								<el-col :span="8">缸号：{{scope.row.gh}}</el-col>
								<el-col :span="13">{{scope.row.created_at}}</el-col>
							</el-row>
							<el-space wrap style="margin-top: 10px;">
								<div v-for="item in scope.row.tasks" :key="item.id">
									<el-button v-if="item.is_do" type="success">
										{{item.process_name}}
										<span> / {{item.staff_name}}</span>
									</el-button>
									<el-button @click="staffCheck(item, scope.row)" v-if="!item.is_do" type="danger">
										{{item.process_name}}
									</el-button>


								</div>
							</el-space>
						</el-card>
					</template>
				</el-table-column>
			</scTable>

			<el-descriptions v-if="activeName == '统计'" :title="procedure_name" :column="1" border>
				<el-descriptions-item v-for=" (val, key) in countData" :key="key" :label="showLabel(val)" >{{val.number}}</el-descriptions-item>
			</el-descriptions>

		</el-main>

	</el-container>
	<taskStaff-dialog v-if="dialog.taskStaff" ref="taskStaffDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></taskStaff-dialog>
</template>

<script>
	import taskStaffDialog from '../procedure/taskStaff'

	export default {
		name: 'listCrud',
		components: {
			taskStaffDialog
		},
		data() {
			return {
				procedure_name: this.$route.query.name,
				radio1: '',
				dialog:{
					save: false,
					info: false
				},
				list: {
					apiObj: this.$API.workshop.taskList,
					params: {name : this.$route.query.name, state:"doing"}
				},
				
				activeName: '制作中',
				countData: [],
				selection: [],
				checkRow: null,
			}
		},
		mounted() {
			//修改tab名称
			this.$store.commit("updateViewTagsTitle", this.procedure_name)
		},
		methods: {
			upsearch(page = 1) {
				this.$refs.table.upData(this.list.params, page)
			},
			tabCheck(state) {
				if (state == 'wait') {
					this.activeName = '未开始'
				} else if (state == 'doing') {
					this.activeName = '制作中'
				} else if (state == 'end') {
					this.activeName = '已完成'
				}
				this.list.params.state = state
				this.$nextTick(() => {
					this.$refs.table.upData(this.list.params, 1)
				})
				
			},

			async tabCount() {
				this.list.params.state = 'count'

				var res = await this.list.apiObj.get(this.list.params)
				if (res.code == 200) {
					this.countData = res.data
				}
			},
			staffCheck(item, row) {
				this.dialog.taskStaff = true
				this.checkRow = row
				this.$nextTick(() => {
					this.$refs.taskStaffDialog.open("show").setData(item)
				})
			},
			handleSaveSuccess() {
				this.$refs.table.refresh()
			},
			showLabel(val) {
				return val.color + '--' + val.size;
			},
			getQrcode(item) {
				return "http:://staff.yiliwenclothes.top/#/task?patch=" + item.id
			},
			async handEnd(item) {
				var reqData = {
					id: item.id
				}
				var res = await this.$API.procedure.handEnd.post(reqData)
				if (res.code == 200) {
					this.$message.success('完结成功')
					this.$refs.table.removeKey(item.id)
				}
			}


			
		}
	}
</script>

<style>
	.is-active {
		font: white;
	}
	.el-card__body{
		padding: 5px 20px 15px 20px;
		font-size: 14px;
/*		font-weight: bold;*/
	}
	.card-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
</style>
